<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>我的已办</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .layui-form-label {
            width: auto !important;
        }

        .operation span:last-of-type {
            color: #f5222d;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }
        td {
            white-space: nowrap;
            text-align: center;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">搜索：</label>
            <input type="text" name="orderNum" id="orderNum" class="layui-input" style="width: 15em;" placeholder="工单编号" value="">
        </div>
        <div class="layui-inline">
            <input type="text" name="checker" id="checker" class="layui-input" style="width: 15em;" placeholder="审核人" value="" onclick="isAdminOfCheckInfo()">
        </div>
        <div class="layui-inline">
            <select id="checkStatus" type="text" name="checkStatus" class="layui-input" style="width: 8em;" lay-filter="checkStatus">
                <option value="">请选择通过状态...</option>
                <option value="0">未通过</option>
                <option value="1">通过</option>
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索审核记录</button>
        </div>
    </div>
</form>

<table class="layui-table" lay-skin="line" lay-filter="checkInfo">
    <thead>
    <tr>
        <!--        <th>ID</th>-->
        <th style="text-align: center">工单号</th>
        <th style="text-align: center">审核时间
            <span class="layui-table-sort layui-inline">
              <i class="layui-edge layui-table-sort-asc" title="升序" onclick="sortTimeOfCheck('asc')"></i>
              <i class="layui-edge layui-table-sort-desc" title="降序" onclick="sortTimeOfCheck('desc')"></i>
            </span></th>
        <th style="text-align: center">是否通过</th>
        <th style="text-align: center">ng原因说明</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="totalPage"><cite>共<span id="total">0</span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var form = null;
    var list = null;

    function isAdminOfCheckInfo(){
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                }
                else if (res.code===400){
                    $('#checker').attr('disabled','disabled');
                    layer.msg("您只能查看自己的审核记录");
                }
            }
        })

    }

    layui.use(['form', 'element'], function() {
        form = layui.form;
        search(1,'desc');
        form.on('submit(searchBtn)', function() {
            search(1,'desc');
            return false;
        });
        $('.fristPage').click(function() {
            search(1,'desc');
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1),'desc');
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage),'desc');
            return false;
        });
        $('.endPage').click(function() {
            search(endPage,'desc');
            return false;
        })
    })

    //时间排序方法
    function sortTimeOfCheck(data) {
        search(1,data)
    }

    //详情
    function reportInfo(index) {
        if (!index) return false;
        layer.open({
            type: 1,
            skin: 'layui-layer-rim',
            area: ['800px', '620px'],
            title: '详情信息',
            content: `
                <div style=" margin: 15px"></div>

                <div>
                <label class="layui-form-label">工单号：</label>
                <div class="layui-input-inline " style="width: 15em"  >
                <input id="orderNumOfInfo" type="text" name="orderNumOfInfo" placeholder="工单号" class="layui-input" style="width: 19em !important;" readonly="readonly">
                </div></div>

                <div class="layui-row">
                 <div class="layui-col-md6">
                <label class="layui-form-label" style="margin: 10px 0;">涉及工序：</label>
                <div class="layui-input-inline">
                <input id="process" type="text" name="process" placeholder="涉及工序" class="layui-input" style="margin: 10px 0; width: 18em !important;" readonly="readonly">
                </div></div>

                <div class="layui-col-md6">
                <label class="layui-form-label" style="margin: 10px 0;">涉及人员：</label>
                <div class="layui-input-inline">
                <input id="workers" type="text" name="workers" placeholder="涉及人员" class="layui-input" style="margin: 10px 0; width: 18em !important;" readonly="readonly">
                </div></div>
                </div>

                <label class="layui-form-label" style="margin: 10px 0;">最终数据统计：</label>
                <table style="margin: 10px" border="2" width="510px" height="80px">
                <tbody>
                <tr>
                <td><b>计划数量</b></td>
                <td><b>当前数量</b></td>
                <td><b>总不良品数</b></td>
                <td><b>总缺数</b></td>
                </tr>
                <tr>
                <td><b id="amountPlan" style="color: #1890ff"></b></td>
                <td><b id="amount" style="color: #2b8d08"></b></td>
                <td><b id="badAmount" style="color: #ff6918"></b></td>
                 <td><b id="missingAmount" style="color: #ff1818"></b></td>
                 </tr>
                 </tbody>
                 </table>

                <div class="layui-row">
                <div class="layui-col-md6">
                <label class="layui-form-label" style="margin: 10px 0;">审核时间：</label>
                <div class="layui-input-inline">
                <input id="createTime" type="text" name="createTime" placeholder="审核时间"  class="layui-input" style=" margin: 10px 0;width: 18em !important;" readonly="readonly"></div></div>

                <div class="layui-col-md6">
                <label class="layui-form-label" style="margin: 10px 0;">审核结果：</label>
                <div class="layui-input-inline">
                <input id="result" type="text" name="result" placeholder="审核结果"  class="layui-input" style="margin: 10px 0; width: 18em !important;" readonly="readonly"></div></div>
                </div>

                <div>
                <label class="layui-form-label" style="margin: 10px 0;">说明：</label>
                <div class="layui-input-inline" style="width: 75%">
                <textarea id="ngReasonOfInfo" name="ngReasonOfInfo" required  placeholder="说明" class="layui-textarea" style="margin: 10px 0;" readonly="readonly"></textarea></div></div>

                <div>
                <label class="layui-form-label" style="margin: 10px 0;">审核人：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="checkerOfInfo" type="text" name="checkerOfInfo" placeholder="审核人" class="layui-input" style="margin:10px;width: 16.5em !important;" readonly="readonly"></div></div>

                <div align="center" style="margin: 20px"><button class="layui-btn layui-btn-danger" onclick="layer.close(layer.index)"><b><i class="layui-icon">&#xe605;</i></b></button></div>

            `,

            success: function(){
                $.ajax({
                    url: url + '/check-info/checkInfo/' + index,
                    contentType: 'application/json',
                    async: false,
                    success: function (res) {
                        $('#orderNumOfInfo').val(res.data.orderNum);
                        $('#process').val(res.data.process);
                        $('#workers').val(res.data.workers);
                        $('#amountPlan').html(res.data.amountPlan);
                        $('#amount').html(res.data.amount);
                        $('#badAmount').html(res.data.badAmount);
                        $('#missingAmount').html(res.data.missingAmount);
                        $('#createTime').val(res.data.createTime);
                        $('#checkerOfInfo').val(res.data.checker);
                        $('#ngReasonOfInfo').val(res.data.ngReason);
                        $('#result').val(res.data.result);
                        form.render()
                    }
                })
            }
        })
    }

    function search(index,status) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        data.checkerNo=sessionStorage.getItem('loginName');
        data.reportStatus=$('#reportStatus').val();
        data.desc=status;
        $.ajax({
            url: url + '/check-info/listCheckInfo',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>" +
                        "<td style='color: #1E9FFF;'>" + res.data.records[i].orderNum +"</td>" +
                        "<td style='color:#1E9FFF;'>" + res.data.records[i].createTime.replace('T', ' ') + "</td>" +
                        "<td>" +isCheckStatus(res.data.records[i].pass) + "</td>" +
                        "<td>" +res.data.records[i].ngReason + "</td>" +
                        "<td class='operation'>" +
                        "<button type='button' class='layui-btn layui-btn-warm layui-btn-sm' onclick='reportInfo(\"" + res.data.records[i].orderNum + "\")'>详情</button>" +
                        "</td></tr>"
                    );
                }
                $('#total').html(Math.ceil(res.data.records[0].allTotal/10))
                $('#page').html(displayStart)
            }
        })
    }
</script>
</body>
</html>